<template>  
hh
    <div>
        <h2>房型列表</h2>
        <input type="button" value="房型增加" @click="add" />
        <input type="button" value="导出" @click="getExecl" />
        <table class="table table-bordered">
            <tr>
                <td>房型名称</td>
                <td>门市价</td>
                <td>房间数量</td>
                <td>状态</td>
                <td>房间号</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.htName }}</td>
                <td>{{ item.money }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.htState==1?'启用':'停用' }}</td>
                <td>{{ item.houseNumber }}</td>
                <td>
                    <input type="button" value="修改" @click="upd(item.htId)" />
                    <input type="button" value="删除" @click="del(item.htId)" />
                    <input type="button" v-if="item.htState==1" value="停用" @click="updstate(item.htId,item.htState)" />
                    <input type="button" v-else value="启用" @click="updstate(item.htId,item.htState)" />
                </td>
            </tr>
        </table>
        <div>
            <span>总条数{{ totalcount }}</span>
            <span>总页数{{ totalpage }}</span>
            <span>当前第{{ state.index }}/{{ totalpage }}</span>
            <input type="button" value="首页" @click="page('1')" />
            <input type="button" value="上一页" @click="page('2')" />
            <input type="button" value="下一页" @click="page('3')" />
            <input type="button" value="尾页" @click="page('4')" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { isStatement, isTypeNode } from 'typescript';
let router = useRouter();
let data: any = reactive({
    state: {
        index: 1,
        size: 2
    },
    list: [],
    totalcount: 0,
    totalpage: 0
})
let { state, list, totalcount, totalpage } = toRefs(data)
onMounted(() => {
    getlist()
})
const getlist = () => {
    let obj = {
        index: state.value.index,
        size: state.value.size
    }
    axios({
        url: '/api/HouseType/GetHouseTypes',
        method: 'get',
        params: obj
    })
        .then(res => {
            console.log(res)
            list.value = res.data.data
            totalcount.value = res.data.totalcount
            totalpage.value = res.data.totalpage

        })
        .catch(err => {
            console.log(err)
        })
}

const page=(str:any)=>{
    switch(str){
        case"1":
        if(state.value.index==1){
            alert("已经是第一页")
            return 
        }
        state.value.index=1;
        break;
        case"2":
        if(state.value.index==1){
            alert("已经是第一页")
            return 
        }
        state.value.index--;
        break;
        case"3":
        if(state.value.index==totalpage.value){
            alert("已经是最后一页")
            return 
        }
        state.value.index++;
        break;
        case"4":
        if(state.value.index==totalpage.value){
            alert("已经是最后一页")
            return 
        }
        state.value.index=totalpage.value;
        break;
    }
    getlist()
}
const del=(id:any)=>{
    let f=confirm("确定要删除吗？")
    if(f){
        let obj={
        id:id
    }
    axios({
        url: '/api/HouseType/DelHouseType',
        method: 'post',
        params: obj
    })
        .then(res => {
            console.log(res)
            if (res.data.data == 1) {
                alert("删除成功")
                getlist()
            }
           else{
            alert("删除失败")
            return 
           }

        })
        .catch(err => {
            console.log(err)
        })
    }
   
}
const updstate=(id:any,state:any)=>{
if(state==1){
    state=0
}
else{
state=1
}
        let obj={
        id:id,
        state:state
    }
    axios({
        url: '/api/HouseType/UpdHTState',
        method: 'post',
        params: obj
    })
        .then(res => {
            console.log(res)
            if (res.data.data == 1) {
                alert("修改成功")
                getlist()
            }
           else{
            alert("修改失败")
            return 
           }

        })
        .catch(err => {
            console.log(err)
        })
    
   
}
const upd=(id:any)=>{
    router.push({
        path:"/upd",
        query:{
            id:id
        }
    })
}

const getExecl=()=>{
    location.href='https://localhost:7103/api/HouseType/GetHouseTypeExecl?index=1&size=2'
}

const add = () => {
    router.push("/add")
}
</script>

<style scoped></style>